<template>
  <el-card class="card-box" shadow="never" header="任务奖励">
    <div class="container">
      <div class="reward-box" v-for="item in reward" :key="item">
        <div class="reward-name">助力人数：{{ item.help_num }}</div>
        <div class="reward-text">{{ step[item.step] }}级奖励：{{ item.title }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { withDefaults, defineProps, ref } from 'vue'
  interface Props {
    reward: any
  }
  withDefaults(defineProps<Props>(), {
    reward: () => []
  })
  const step = ref('零一二三四五六七八九十')
</script>

<style lang="scss" scoped>
  .card-box {
    margin-bottom: 16px;
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-gap: 20px;
      .reward-box {
        font-size: 14px;
        .reward-name {
          font-size: 14px;
          color: #999;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
